<!--
 * @Date: 2024-07-30 10:10:33
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-04-16 17:06:17
 * @Description: 数据表格配置的编辑面板
-->
<template>
  <el-form-item label="表格标题">
    <el-input v-model="tableConfig.title"></el-input>
  </el-form-item>
  <el-form-item label="表格高度">
    <el-input v-model="tableConfig.height" placeholder="(auto|%|px)"></el-input>
  </el-form-item>
  <el-form-item label="最小高度">
    <el-input v-model="tableConfig.minHeight"></el-input>
  </el-form-item>
  <el-form-item label="主键字段">
    <el-input v-model="tableConfig.keyField"></el-input>
  </el-form-item>
  <el-form-item label="显示标题">
    <el-switch v-model="tableConfig.showTitle"></el-switch>
  </el-form-item>
  <el-form-item label="自动加载">
    <el-switch v-model="tableConfig.autoLoad"></el-switch>
  </el-form-item>
  <el-form-item label="是否斑马纹">
    <el-switch v-model="tableConfig.stripe"></el-switch>
  </el-form-item>
  <el-form-item label="是否合计行">
    <el-switch v-model="tableConfig.totaled"></el-switch>
  </el-form-item>
  <el-form-item label="数据集配置">
    <el-button type="primary" round plain @click="onDataSourceEdit">编辑</el-button>
  </el-form-item>
  <el-form-item label="数据请求后">
    <el-button round plain
      :type="optionModel.tableConfig['responseHandle'] ? 'primary' : 'info'"
      @click="codeEditorDialogOpen('responseHandle', ['tableData'])">编辑</el-button>
  </el-form-item>
  <el-form-item label="显示操作列">
    <el-switch v-model="tableConfig.showOperateCol" @change="showOperateColChange"></el-switch>
  </el-form-item>
  <el-form-item label="操作列配置" v-if="tableConfig.showOperateCol">
    <el-button type="primary" round plain @click="operateColDialogOpen">编辑</el-button>
  </el-form-item>
  <el-form-item label="合并函数配置">
    <el-button :type="optionModel.tableConfig['spanMethodFunc'] ? 'primary' : 'info'" round plain @click="codeEditorDialogOpen('spanMethodFunc', ['row', 'rowIndex', 'column', 'columnIndex', 'data', 'visibleData' ])">编辑</el-button>
  </el-form-item>
  <el-form-item label="单元格样式类">
    <el-button :type="optionModel.tableConfig['cellClassNameFunc'] ? 'primary' : 'info'" round plain @click="codeEditorDialogOpen('cellClassNameFunc', ['row', 'rowIndex', 'column', 'columnIndex', 'data', 'visibleData' ])">编辑</el-button>
  </el-form-item>

  <!-- 数据集配置弹窗 -->
  <DataSourceDialog
    ref="tableDataSourceRef"
    @confirm="onDataSourceConfirm"
    :optionModel="props.optionModel"
  />
  <!-- 请求成功后弹窗 -->
  <CodeEditorDialog
    ref="codeEditorRef"
    :="codeEditorAttrs"
    @confirm="codeEditorDialogConfirm"
  />
  <!-- 操作列配置弹窗 -->
  <OperateColDialog
    ref="operateColDialogRef"
    :optionModel="props.optionModel"
    @confirm="operateColDialogConfirm"
  />
</template>

<script setup name="tableConfig-editor">
import XEUtils from 'xe-utils';
import DataTableConfig from '@/components/form-designer/widget-panel/cfg/widget-senior/widget-dataTable.js'

import { ref, reactive, computed } from 'vue';

import OperateColDialog from '@/components/dialogs/src/table-widget/OperateColDialog.vue'
import { DataSourceDialog, CodeEditorDialog } from '@/components/dialogs';

const props = defineProps({
  // 设计器信息
  designer: { type: Object },
  // 组件选项信息
  optionModel: { type: Object },
  // 当前选中的组件
  selectedWidget: { type: Object },
});

// 表格的配置
const tableConfig = computed(() => {
  return props.optionModel.tableConfig
})

// 定义ref对象
const tableDataSourceRef = ref(null);

// ------ dataSource edit
// 打开数据集配置弹窗
const onDataSourceEdit = () => {
  const { dataConfig } = props.optionModel
  const { sqlConfig } = dataConfig;
  const columns = XEUtils.clone(dataConfig.columns, true);
  tableDataSourceRef.value.handleOpen({ ...sqlConfig, columns });
}
// 数据集弹窗确认
const onDataSourceConfirm = data => {
}

// responseHandle config
const codeEditorRef = ref(null)
const codeEditorAttrs = reactive({
  title: '编写内容',
  frontAlert: `function ${props.optionModel.name}.responseHandle(tableData) {`
})
const codeEditorState = reactive({
  // 当前操作的属性
  curAttr: '',
  curAttrContent: '',
})
const codeEditorDialogOpen = (attr, paramsText=[]) => {
  const { name, tableConfig } = props.optionModel
  codeEditorState.curAttr = attr
  codeEditorAttrs.frontAlert = ` function ${name}.${attr}(${paramsText.join(',')}) {`
  codeEditorRef.value.handleOpen(tableConfig[attr])
}
const codeEditorDialogConfirm = (result) => {
  props.optionModel.tableConfig[codeEditorState.curAttr] = result
}

// 操作列的配置弹窗Ref
const operateColDialogRef = ref()
/**
 * 显示操作列开关按钮变化时
 * 
 * @param value 值
 */
const showOperateColChange = (value) => {
  const { operateColumn } = props.optionModel.dataConfig
  if (value && !operateColumn) {
    const { options } = DataTableConfig
    props.optionModel.dataConfig['operateColumn'] = options.dataConfig.operateColumn
  }
}
/**
 * 打开操作列的配置弹窗
 */
const operateColDialogOpen = () => {
  const { operateColumn } = props.optionModel.dataConfig
  operateColDialogRef.value.handleOpen(XEUtils.clone(operateColumn, true))
}
/**
 * 操作列的配置弹窗确定
 */
const operateColDialogConfirm = (result) => {
  props.optionModel.dataConfig['operateColumn'] = result
}
</script>

<style lang="scss" scoped></style>
